import React, {useRef} from 'react'
import './index.scss'
import T from 'prop-types'

export default function Search(props) {
  const { placeholderText, toSubmit, width, onChange=()=>{} } = props
  const inputRef = useRef()

  return (
    <div className="search" style={{ width: width }}>
      <div className="box">
        <input placeholder={placeholderText} ref={inputRef} onChange={()=>{onChange(inputRef)}}/>
      </div>
      <button onClick={() => toSubmit(inputRef)} className="search-button">
        搜索
      </button>
    </div>
  )
}
Search.propTypes = {
  placeholderText: T.string,
  toSubmit: T.func,
  width: T.string,
  onChange:T.func,
}
